<template>
    <div class="comm">
        <!-- 手机开始 -->
        <img src="../../assets/img/rexiao01.webp" alt="">
        <ul>
            <li>
                <img src="../../assets/img/shouji.jpg" alt="">
                <h4>小米11 Pro</h4>
                <p>1/1.12''GN2｜骁龙888</p>
                <h5>￥4499起 <h5>￥4999</h5></h5>
                <button>立即购买</button>
            </li>
            <li>
                <img src="../../assets/img/shouji.jpg" alt="">
                <h4>小米11 Pro</h4>
                <p>1/1.12''GN2｜骁龙888</p>
                <h5>￥4499起 <h5>￥4999</h5></h5>
                <button>立即购买</button>
            </li>
            <li>
                <img src="../../assets/img/shouji.jpg" alt="">
                <h4>小米11 Pro</h4>
                <p>1/1.12''GN2｜骁龙888</p>
                <h5>￥4499起 <h5>￥4999</h5></h5>
                <button>立即购买</button>
            </li>
            <li>
                <img src="../../assets/img/shouji.jpg" alt="">
                <h4>小米11 Pro</h4>
                <p>1/1.12''GN2｜骁龙888</p>
                <h5>￥4499起 <h5>￥4999</h5></h5>
                <button>立即购买</button>
            </li>
        </ul>
        <button>更多小米手机产品 ></button>
        <div class="yuliu"></div>
        <!-- 手机结束 -->

        <!-- 电视开始 -->
        <img src="../../assets/img/dianshi.webp" alt="">
        <button class="tv">更多小米电视产品 ></button>
        <div class="yuliu"></div>
        <!-- 电视结束 -->

        <!-- 笔记本开始 -->
        <img src="../../assets/img/bijiben.webp" alt="">
        <ul class="jotter">
            <li>
                <img src="../../assets/img/bijiben.jpg" alt="">
                <h4>RedmiBook Pro 14</h4>
                <p>2.5K超视网膜全面屏</p>
                <h5>￥4499起 <h5>￥4699</h5></h5>
                <button>立即购买</button>
            </li>
            <li>
                <img src="../../assets/img/bijiben.jpg" alt="">
                <h4>RedmiBook Pro 14</h4>
                <p>2.5K超视网膜全面屏</p>
                <h5>￥4499起 <h5>￥4699</h5></h5>
                <button>立即购买</button>
            </li>
            <li>
                <img src="../../assets/img/bijiben.jpg" alt="">
                <h4>RedmiBook Pro 14</h4>
                <p>2.5K超视网膜全面屏</p>
                <h5>￥4499起 <h5>￥4699</h5></h5>
                <button>立即购买</button>
            </li>
            <li>
                <img src="../../assets/img/bijiben.jpg" alt="">
                <h4>RedmiBook Pro 14</h4>
                <p>2.5K超视网膜全面屏</p>
                <h5>￥4499起 <h5>￥4699</h5></h5>
                <button>立即购买</button>
            </li>
        </ul>
        <button class="bjb">更多小米笔记本产品 ></button>
        <div class="yuliu"></div>
        <!-- 笔记本结束 -->

        <!-- 智能开始 -->
        <img src="../../assets/img/zhineng.webp" alt="">
        <button class="tv">更多米家家电产品 ></button>
        <div class="yuliu"></div>
        <img src="../../assets/img/zhineng02.webp" alt="">
        <button class="tv">更多米家智能产品 ></button>
        <div class="yuliu"></div>
        <!-- 智能结束 -->

        <!-- 最后部分开始 -->
        <ul class="xuexi">
            <li>
                <img src="../../assets/img/xuexi.webp" alt="">
            </li>
            <li>
                <img src="../../assets/img/xuexi.webp" alt="">
            </li>
            <li>
                <img src="../../assets/img/xuexi.webp" alt="">
            </li>
            <li>
                <img src="../../assets/img/xuexi.webp" alt="">
            </li>
            <li>
                <img src="../../assets/img/xuexi.webp" alt="">
            </li>
            <li>
                <img src="../../assets/img/xuexi.webp" alt="">
            </li>
        </ul>
        <img src="../../assets/img/yjhx.webp" alt="">
        <button class="footer">了解小米</button>
        <div class="yuliu"></div>
    </div>
</template>
<style scoped lang="scss">
    .comm{
        width: 100%;
        >img{
            width: 100%;
            font-size: 0;
        }
        >ul{
            display: flex;
            // 允许换行
            flex-wrap: wrap;
            justify-content: space-around;
            >li{
                margin-top: .4rem;
                font-family:Helvetica Neue,Tahoma,Arial,PingFangSC-Regular,Hiragino Sans GB,Microsoft Yahei,sans-serif;
                width: 47%;
                display: flex;
                flex-direction: column;
                >h4{
                    margin: .2rem 0;
                    font-size: .4rem;
                    color: rgba(0,0,0,.87);
                    font-weight: 500;
                }
                >p{
                    color: rgba(0,0,0,.54);
                    font-size: .3rem;
                }
                >h5{
                    color: #ea625b;
                    font-size: .4rem;
                    font-weight: 300;
                    >h5{
                        display: inline-block;
                        color: rgba(0,0,0,.54);
                        font-size: .3rem;
                        font-weight: 300;
                        // 删除线
                        text-decoration:line-through;
                    }
                }
                >button{
                    width: 2.6rem;
                    background-color: #ea625b;
                    color: white;
                    border: none;
                    text-align: center;
                    font-size: .35rem;
                    padding: .2rem 0;
                    border-radius: .1rem;
                    margin: 0 auto;
                }
            }
        }
        >button{
            width: 100%;
            border: none;
            border-top: .02rem solid rgba(121, 121, 121, 0.6);
            background-color: white;
            padding: .5rem 0;
            margin-top: .4rem;
            font-size: .4rem;
            color: #949494;
        }
        >.yuliu{
            background-color: rgb(245, 245, 245);
            width: 100%;
            height: .2rem;
        }
        >.tv{
            border: none;
            padding: 0;
            padding-bottom: .45rem;
        }
        >.jotter{
            margin: 0;
        }
        >.bjb{
            border: none;
            padding: 0;
            padding-top: .5rem;
            padding-bottom: .5rem;
        }
        >.xuexi{
            justify-content: space-between;
            margin-bottom: .15rem;
            >li{
                width: 49.5%;
                margin: 0;
                margin-bottom: .1rem;
            }
        }
        >.footer{
            padding: 0;
            margin: 0;
            border: none;
            font-size: .45rem;
            padding: .2rem 0;
            box-shadow: 0 0 .2rem rgba(121, 121, 121, 0.6);
        }
    }
</style>
